<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<script>
	var brands = {},
		brandsData = [],
		versions = {},
		drilldownSeries = [];
	
	var colors = ["#7AAAEE","#F06F3E","#AAEE6A","#F0E150","#5DA0A9","#75738B"];

	$(document).ready(function() {
		var csv = (document.getElementById('tsv').innerHTML).split("\n");
		
		// 데이터 파서
		for (var i in csv) {
// 		$.each(csv, function(i, name) {
			var brand, version;
			
			var str = csv[i].split("\t");
			str[1] = parseFloat(str[1].replace("%",""));
			
			var name = str[0];
			name = name.split(' -')[0];
			version = name.match(/([0-9]+[\.0-9x]*)/);
			
			if (version) version = version[0];
			else version = "?";
				
			brand = name.replace(version, '').trim();
			
			if (!brands[brand]) {
                brands[brand] = str[1];
            } else {
                brands[brand] += str[1];
            }

			if (!versions[brand]) {
            	versions[brand] = [];
			}
            versions[brand].push(['v' + version, str[1]]);
			
// 			console.log(brand + " : " + version);
// 		});
		}
		
		$.each(brands, function (name, value) {
            brandsData.push({ 
                name: name, 
                y: value,
                drilldown: versions[name] ? name : null
            });
        });
		
// 		console.dir(brandsData);
		
		$.each(versions, function (key, value) {
            drilldownSeries.push({
                name: key,
                id: key,
                data: value
            });
        });
		
// 		console.dir(drilldownSeries);
		
		//sheet 초기화
		var cfg = {
		    Chart : {
				Animation : true,
		        PlotBackgroundColor : "#FAFAFA",
				PlotBorderColor:"#A9AEB1",
		        PlotBorderWidth:0.5,
				BackgroundColor:{
					LinearGradient : [0,0,100,500],
					Stops : [
						[0, "#D7E1F3"],
						[1, "#FFFFFF"]
					]
				},
				BorderColor : "#84888B",
				Type : "column",
				marginRight: 10
		    },
		    title: {
                text: 'Browser market shares. November, 2013'
            },
            Colors : colors,
            XAxis : {
            	type: 'category'
		    },
		    YAxis : {
		    	title: {
                    text: 'Total percent market share'
                }
		    },
		    legend: {
                enabled: false
            },
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true,
                        format: '{point.y:.1f}%'
                    }
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
            },
//             series: [{
//                 name: 'Brands',
//                 colorByPoint: true,
//                 data: brandsData
//             }],
            drilldown: {
                series: drilldownSeries
            }
		};
		
		myChart.SetOptions(cfg);
		
		myChartDraw();
	});
	
	var firstPage;	// 포인트 클릭 때문에 첫 페이지를 구분
	
	function myChartDraw() {
		firstPage = true;
		
		var Type = $("#combo").val();
		myChart.RemoveAll();
		
		switch(Type) {
			case "pie":
				myChart.SetBaseOptions({
					Type:"pie"
				},1);
				myChart.SetPlotOptions({
					Pie:{
						InnerSize:0,
						SlicedOffset:20,
						AllowPointSelect:true
					}
				});
				break;
			case "column":
				myChart.SetBaseOptions({
					Type:"column"
				},1);
				break;
		}
		
		var data = [{
			name: 'Brands',
        	colorByPoint: true,
        	Cursor:"pointer",
        	data: brandsData
		}];
		
		myChart.SetSeriesOptions(data);
		myChart.SetColors(colors); 
		
		myChart.Draw();
	}
	
	// 포인터 선택
	function myChart_OnPointClick(Index, X, Y) {
// 		console.log(Index + "번째 그래프의 " + X + "번 값은 " + Y + "입니다.");

		// 첫 페이지가 아니면 클릭이 안되게 함
		if(!firstPage) {
			return;
		}
		
		firstPage = false;
		
		var name = drilldownSeries[X].name;
		var rData = [];
		
		$.each(drilldownSeries[X].data, function(i, item) {
			rData.push({name: item[0], y: item[1]});
		});
		
		var data = [{
            Name : name,
			Data : rData
		}];
		
		var arr = new Array(colors[X]);
		myChart.SetColors(arr); 
		
		myChart.SetSeriesOptions(data);
		myChart.Draw();
	}
	
</script>
<title>DrillDown 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/chartNavi.jsp" %>
	<div id="title">DrillDown 예제</div>
	<div id="desc">
		데이터를 카테고리 별로 나누고 합친 값을 보여준다.<br>각 항목을 클릭하면 세부 내역으로 나눠서 볼 수 있다.
	</div>

	<div id="functionArea">
		차트 종류 선택 :
		<select class="chartCombo" id="combo" onchange="myChartDraw()">
			<option value="column" selected>컬럼</option>
			<option value="pie">파이</option> 
		</select>
		&nbsp;
		<input type="button" value="처음 화면" onClick="myChartDraw();">
	</div>
	
	<div id="viewArea">
		<script type="text/javascript">
			createIBChart("myChart", "100%", "400px");
		</script>
	</div>
</div>
<pre id="tsv" style="display:none">
Microsoft Internet Explorer 8.0	26.61%
Microsoft Internet Explorer 9.0	16.96%
Chrome 18.0	8.01%
Chrome 19.0	7.73%
Firefox 12	6.72%
Microsoft Internet Explorer 6.0	6.40%
Firefox 11	4.72%
Microsoft Internet Explorer 7.0	3.55%
Safari 5.1	3.53%
Firefox 13	2.16%
Firefox 3.6	1.87%
Opera 11.x	1.30%
Chrome 17.0	1.13%
Firefox 10	0.90%
Safari 5.0	0.85%
Firefox 9.0	0.65%
Firefox 8.0	0.55%
Firefox 4.0	0.50%
Chrome 16.0	0.45%
Firefox 3.0	0.36%
Firefox 3.5	0.36%
Firefox 6.0	0.32%
Firefox 5.0	0.31%
Firefox 7.0	0.29%
Proprietary or Undetectable	0.29%
Chrome 18.0 - Maxthon Edition	0.26%
Chrome 14.0	0.25%
Chrome 20.0	0.24%
Chrome 15.0	0.18%
Chrome 12.0	0.16%
Opera 12.x	0.15%
Safari 4.0	0.14%
Chrome 13.0	0.13%
Safari 4.1	0.12%
Chrome 11.0	0.10%
Firefox 14	0.10%
Firefox 2.0	0.09%
Chrome 10.0	0.09%
Opera 10.x	0.09%
Microsoft Internet Explorer 8.0 - Tencent Traveler Edition	0.09%</pre>
</body>
</html>